<template>
    <div>
        <c-header left-text="返回" title="我的车位"></c-header>
        <van-collapse v-model="activeNames" :is-link="false">
            <van-collapse-item v-for="item in stalls" :key="item.id" :title="item.number" :name="item.id">
                <van-cell-group>
                    <van-cell title="车位管理者姓名" :value="item.admName" />
                    <van-cell title="车位管理者电话" :value="item.admPhone" />
                    <van-cell title="购买价格" :value="item.buy" />
                    <van-cell title="车位编号" :value="item.number" />
                    <van-cell title="租赁价格" :value="item.rent" />
                    <van-cell title="车位类型" :value="item.type" />
                    <van-cell title="介绍" :value="item.introduce" />
                </van-cell-group>
                <van-button type="primary" block @click="addStall(item.id)">购买</van-button>
            </van-collapse-item>
        </van-collapse>
    </div>
</template>

<script>
import api from "../../api";
export default {
    name: "stall",
    data() {
        return {
            userId: "",
            stalls: [],
            activeNames: [],
            imgList: [],
        };
    },
    mounted() {
        this.userId = JSON.parse(localStorage.getItem("userInfo")).id;
        this.getAllStall();
    },
    methods: {
        // 未售车位
        async getAllStall() {
            const response = await api.user.getAllStall();
            this.stalls = response.data.data;
        },
        // 购买车位
        async addStall(id) {
            const response = await api.user.addStallByUser({
                userId: this.userId,
                stallId: [id],
            });
            if (response.data.code === 200) {
                this.$Toast("购买成功");
                this.getAllStall();
            } else {
                this.$Toast("购买失败");
            }
        },
    },
};
</script>

<style lang='less' scoped>
</style>